<template>
  <el-dialog
      class="simple-dialog"
      title="用户信息"
      :visible.sync="tempVisible"
      width="500px"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
      @close="close"
  >
    <el-form ref="formName" :rules="rules" :model="tempData" label-width="100px">

      <el-form-item label="账号:" prop="name">
        <el-input v-model="tempData.name" :disabled="tempData.id !== 0" />
      </el-form-item>

      <el-form-item label="昵称:" prop="nick">
        <el-input v-model="tempData.nick" placeholder="3-12位字符" />
      </el-form-item>

      <el-form-item label="密码:" prop="nick">
        <el-input v-model="tempData.pwd" placeholder="3-12位字符" />
      </el-form-item>

      <el-form-item label="领取:" prop="nick">
        <el-input-number v-model="tempData.max_num" controls-position="right" :min="0" :max="300" placeholder="最大领取"></el-input-number>
      </el-form-item>

      <el-form-item v-if="tempData.role !== 0 || tempData.id === 0" label="角色:">
        <el-select v-model="tempData.role" placeholder="角色">
          <el-option label="请选择" :value="0" key="0" />
          <el-option v-for="r in roles" :label="r.name" :value="r.id" :key="r.id" />
        </el-select>
      </el-form-item>

    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="saveUpdate('formName')">
        <span v-if="this.tempData.id">确认修改</span>
        <span v-else>确认添加</span>
      </el-button>
    </span>
  </el-dialog>
</template>

<script>
import { edit, add } from '@/api/user'
import { getList } from '@/api/role'

export default {
  name: 'AddEdit',
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    data: {
      type: Object,
      default: {} // eslint-disable-line
    }
  },
  data() {
    return {
      tempVisible: false,
      roles: [],
      tempData: {
        id: null,
        name: null,
        nick: null,
        pwd: '',
        role: null,
        role_name: null,
        max_num: 0
      },
      rules: {}
    }
  },
  watch: {
    dialogVisible: function(val) {
      this.tempVisible = val
    },
    data: function(val) {
      this.tempData = val
      this.getRole()
    }
  },
  mounted() {

  },
  methods: {
    getRole() {
      getList(1, {}).then(res => {
        this.roles = [];
        res.data.list.map(val => {
          this.roles.push({id: val.id, name: val.name})
        })
      })
    },
    close() {
      this.$emit('close', 0)
    },
    saveUpdate(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const temp = {
            id: this.tempData.id,
            name: this.tempData.name,
            nick: this.tempData.nick,
            pwd: this.tempData.pwd,
            role: this.tempData.role,
            max_num: this.tempData.max_num,
          }
          if (this.tempData.id > 0) {
            edit(temp).then(res => { // eslint-disable-line
              this.$emit('close', 1)
            })
          } else {
            add(temp).then(res => { // eslint-disable-line
              this.$emit('close', 1)
            })
          }

        } else {
          return false
        }
      })
    }
  }
}
</script>

<style lang="scss">
.add-edit {
  .el-dialog {
    .el-dialog__body {
      padding: 10px 20px 0 20px !important;
    }
  }
}
</style>
